<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./fullpage/fullpage.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/home.css">
  <link rel="stylesheet" href="./css/order.css">
  <link rel="stylesheet" href="./jquery-ui/jquery-ui-1.11.0-beta.2.custom/jquery-ui.min.css">

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="./jquery-ui/jquery-ui-1.11.0-beta.2.custom/jquery-ui.min.js"></script>
  <script src="./fullpage/fullpage.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
  <script src="./slimscorll/jQuery-slimScroll-master/jquery.slimscroll.min.js"></script>
  <style>
    #fulpage {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    header {
      background-color: rgb(32, 30, 30);
      color: #fff;
    }

    header .logo {
      line-height: 60px;
    }

    header .nav .nav-link {
      line-height: 60px;
      font-size: 18px;
      color: #ccc;
    }

    header .nav .nav-link:hover {
      background-color: #000;
    }

    header .nav .nav-link.active {
      background-color: #000;
      color: #fff;
    }

    #firstPage main {
      color: #fff;
    }

    #firstPage main>div {
      background-color: rgba(0, 0, 0, 0.322);
      margin: 40px auto;
      padding: 20px 0;
      border-radius: 10px;
    }

    #firstPage main h3 {
      text-align: center;
      line-height: 60px;
    }

    .slide {
      position: relative;
    }
  </style>
</head>

<body>
  <div id="fullpage">
    <div class="section" id="firstPage">
      <header class="container-fluid">
        <div class="container-xl">
          <div class="row">
            <div class="col-xl-2">
              <h1 class="logo">logo</h1>
            </div>
            <div class="col-xl-6">
              <ul class="nav row">
                <li class="nav-item col-2.5">
                  <a class="nav-link start active" href="#">开始</a>
                </li>
                <li class="nav-item col-2.5">
                  <a class="nav-link home" href="#">首页</a>
                </li>
                <li class="nav-item col-2.5">
                  <a class="nav-link order" href="#">订购</a>
                </li>
              </ul>
            </div>
            <div class="col-xl-4">
              <ul class="nav accound row">
                <li class="nav-item col-4.5">
                  <a class="nav-link" href="login.html">登陆</a>
                </li>
                <li class="nav-item col-4.5">
                  <a class="nav-link" href="#">注册</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </header>
      <main>
        <div class="container-xl">
          <h3>身未动，心已远。</h3>
          <h3>梦想，并不奢侈，只要勇敢地迈出第一步。</h3>
          <h3>一辈子是场修行，短的是旅行，长的是人生。</h3>
          <h3>不理会繁杂的琐事，自由自在地，去体验。</h3>
        </div>
      </main>
    </div>

    <div class="section" id="secondPage">
      <div class="slide one">
        <div id="con" class="container-fluid">
          <header class="container-fluid">
            <div class="container-xl">
              <div class="row">
                <div class="col-xl-2">
                  <h1 class="logo">logo</h1>
                </div>
                <div class="col-xl-6">
                  <ul class="nav row">
                    <li class="nav-item col-2.5">
                      <a class="nav-link start" href="#">开始</a>
                    </li>
                    <li class="nav-item col-2.5">
                      <a class="nav-link home active" href="#">首页</a>
                    </li>
                    <li class="nav-item col-2.5">
                      <a class="nav-link order" href="#">订购</a>
                    </li>
                  </ul>
                </div>
                <div class="col-xl-4">
                  <ul class="nav accound row">
                    <li class="nav-item col-4.5">
                      <a class="nav-link" href="#">登陆</a>
                    </li>
                    <li class="nav-item col-4.5">
                      <a class="nav-link" href="#">注册</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </header>
          <main class="contaniner-fluid">
            <section class="center">
              <h2>热门旅游</h2>
              <p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
            </section>
            <div id="tour" class="row">
              <figure class="tour col-md-3">
                <img src="image/tour1.jpg" alt="曼谷-芭提雅6日游" />
                <figcaption>
                  <strong class="title">&lt曼谷-芭提雅6日游&gt;</strong>包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
                  <div>
                    <em class="price">￥<strong>2864</strong>起</em>
                    <span class="sat">满意度77%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
              <!--
                       景点
                    -->
              <figure class="tour col-md-3">
                <img src="image/tour2.jpg" alt="马尔代夫双鱼岛4晚6日自助游" />
                <figcaption>
                  <strong class="title">&lt马尔代夫双鱼岛4晚6日自助游&gt;</strong>上海出发，机+酒，包含:早晚餐+快艇
                  <div>
                    <em class="price">￥<strong>8039</strong>起</em>
                    <span class="sat">满意度97%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
              <!--
                       景点
                    -->
              <figure class="tour col-md-3">
                <img src="image/tour3.jpg" alt="海南双飞5日游" />
                <figcaption>
                  <strong class="title">&lt海南双飞5日游&gt;</strong>含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送
                  <div>
                    <em class="price">￥<strong>2709</strong>起</em>
                    <span class="sat">满意度90%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
              <!--
                       景点
                    -->
              <figure class="tour col-md-3">
                <img src="image/tour4.jpg" alt="富山-大阪-东京8日游" />
                <figcaption>
                  <strong class="title">&lt富山-大阪-东京8日游&gt;</strong>暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物
                  <div>
                    <em class="price">￥<strong>9499</strong>起</em>
                    <span class="sat">满意度97%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
              <!--
                       景点
                    -->
              <figure class="tour col-md-3">
                <img src="image/tour5.jpg" alt="法瑞意德12日游" />
                <figcaption>
                  <strong class="title">&lt法瑞意德12日游&gt;</strong>4至5星，金色列车，少女峰，部分THE MALL
                  <div>
                    <em class="price">￥<strong>9199</strong>起</em>
                    <span class="sat">满意度97%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
              <!--
                       景点
                    -->
              <figure class="tour col-md-3">
                <img src="image/tour6.jpg" alt="巴厘岛6日半自助游" />
                <figcaption>
                  <strong class="title">&lt巴厘岛6日半自助游&gt;</strong>蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩
                  <div>
                    <em class="price">￥<strong>6488</strong>起</em>
                    <span class="sat">满意度95%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
              <!--
                       景点
                    -->
              <figure class="tour col-md-3">
                <img src="image/tour7.jpg" alt="塞舌尔迪拜9日自助游" />
                <figcaption>
                  <strong class="title">&lt塞舌尔迪拜9日自助游&gt;</strong>一游两国，4晚塞舌尔，2晚迪拜，香港EK往返
                  <div>
                    <em class="price">￥<strong>9669</strong>起</em>
                    <span class="sat">满意度100%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
              <!--
                       景点
                    -->
              <figure class="tour col-md-3">
                <img src="image/tour8.jpg" alt="花样姐姐土耳其9日或10日游" />
                <figcaption>
                  <strong class="title">&lt花样姐姐土耳其9日或10日游&gt;</strong>最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾
                  <div>
                    <em class="price">￥<strong>9999</strong>起</em>
                    <span class="sat">满意度93%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
              <!--
                       景点
                    -->
              <figure class="tour col-md-3">
                <img src="image/tour9.jpg" alt="大阪-京都-箱根双飞6日游" />
                <figcaption>
                  <strong class="title">&lt大阪-京都-箱根双飞6日游&gt;</strong>盐城直飞，不走回头路，境外无自费，超值之旅
                  <div>
                    <em class="price">￥<strong>5284</strong>起</em>
                    <span class="sat">满意度100%</span>
                  </div>
                  <div class="type">国内长线</div>
                </figcaption>
              </figure>
            </div>
          </main>
          <footer id="footer">
            <p>张博映</p>
            <p>18计应卓越班</p>
            <p>1801050553</p>
          </footer>
        </div>
      </div>

      <div class="slide two">
        <header class="container-fluid">
          <div class="container-xl">
            <div class="row">
              <div class="col-xl-2">
                <h1 class="logo">logo</h1>
              </div>
              <div class="col-xl-6">
                <ul class="nav row">
                  <li class="nav-item col-2.5">
                    <a class="nav-link start" href="#">开始</a>
                  </li>
                  <li class="nav-item col-2.5">
                    <a class="nav-link home active" href="#">首页</a>
                  </li>
                  <li class="nav-item col-2.5">
                    <a class="nav-link order" href="#">订购</a>
                  </li>
                </ul>
              </div>
              <div class="col-xl-4">
                <ul class="nav accound row">
                  <li class="nav-item col-4.5">
                    <a class="nav-link" href="#">登陆</a>
                  </li>
                  <li class="nav-item col-4.5">
                    <a class="nav-link" href="#">注册</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </header>
        <main class="container-fluid">
          <div class="container-xl row">
            <div class="pic col-lg-6"></div>
            <div class="info col-lg-6">
              <strong class="title"></strong>
              <div>
                <em class="price"></em>
                <div class="sat"></div>
              </div>
              <div class="type"></div>
              <button type="button" class="btn btn-primary"> 预订 </button>
            </div>
          </div>
        </main>
      </div>
    </div>
    <div class="section" id="thirdPage">
      <div class="slide one">
        <header class="container-fluid">
          <div class="container-xl">
            <div class="row">
              <div class="col-xl-2">
                <h1 class="logo">logo</h1>
              </div>
              <div class="col-xl-6">
                <ul class="nav row">
                  <li class="nav-item col-2.5">
                    <a class="nav-link start" href="#">开始</a>
                  </li>
                  <li class="nav-item col-2.5">
                    <a class="nav-link home" href="#">首页</a>
                  </li>
                  <li class="nav-item col-2.5">
                    <a class="nav-link order active" href="#">订购</a>
                  </li>
                </ul>
              </div>
              <div class="col-xl-4">
                <ul class="nav accound row">
                  <li class="nav-item col-4.5">
                    <a class="nav-link" href="#">登陆</a>
                  </li>
                  <li class="nav-item col-4.5">
                    <a class="nav-link" href="#">注册</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </header>
        <main class="container-fluid">
          <div class="container-xl row">
            <div class="list col-3-sm">&lt;曼谷-芭提雅6日游&gt;</div>
            <div class="list col-3-ms">&lt;马尔代夫双鱼岛4晚6日自助游&gt;</div>
            <div class="list col-3-ms">&lt;海南双飞5日游&gt;</div>
            <div class="list col-3-ms">&lt;海南双飞5日游&gt;</div>
            <div class="list col-3-ms">&lt;法瑞意德12日游&gt;</div>
            <div class="list col-3-ms">&lt;巴厘岛6日半自助游&gt;</div>
            <div class="list col-3-ms">&lt;塞舌尔迪拜9日自助游&gt;</div>
            <div class="list col-3-ms">&lt;花样姐姐土耳其9日或10日游&gt;</div>
            <div class="list col-3-ms">&lt;大阪-京都-箱根双飞6日游&gt;</div>
          </div>
          <div class="container-xl form">
            <p>景点：<input type="text" name="text" id="text"></p>
            <p>手机：<input type="tel" name="tel" id="tel"></p>
            <p>出发日期: <input type="text" id="datepicker"></p>
            <p>
              <button type="button" id="btn" class="btn btn-primary">
                提交
              </button>
              <button type="button" id="btn-w" class="btn btn-success">
                查看
              </button>
            </p>
          </div>
        </main>
      </div>
      <div class="slide two">
        <header class="container-fluid">
          <div class="container-xl">
            <div class="row">
              <div class="col-xl-2">
                <h1 class="logo">logo</h1>
              </div>
              <div class="col-xl-6">
                <ul class="nav row">
                  <li class="nav-item col-2.5">
                    <a class="nav-link start" href="#">开始</a>
                  </li>
                  <li class="nav-item col-2.5">
                    <a class="nav-link home" href="#">首页</a>
                  </li>
                  <li class="nav-item col-2.5">
                    <a class="nav-link order active" href="#">订购</a>
                  </li>
                </ul>
              </div>
              <div class="col-xl-4">
                <ul class="nav accound row">
                  <li class="nav-item col-4.5">
                    <a class="nav-link" href="#">登陆</a>
                  </li>
                  <li class="nav-item col-4.5">
                    <a class="nav-link" href="#">注册</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </header>

        <main class="container-fluid">
          <div class="container-xl row">
            <table id="table" border="1">
              <thead>
                <tr>
                  <th>用户</th>
                  <th>电话</th>
                  <th>地点</th>
                  <th>时间</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </main>
      </div>
    </div>
    
  </div>
  <script>
    // 初始化fullPage
    let state = JSON.parse(localStorage.getItem("sign_in_state"));
    if (state) {
      $(".accound").html(`
        <li class="nav-item col-4.5">
          <a class="nav-link" href="#">${ state.usr}</a>
        </li>
        <li class="nav-item col-4.5">
          <a class="nav-link" id="q" href="app.html">退出</a>
        </li>
      `);
    }

    $(".accound #q").click(() => {
      localStorage.removeItem("sign_in_state");
    })


    var myFullpage = new fullpage("#fullpage", {
      controlArrows: false,
      verticalCentered: false,
      scrollOverflow: true
    });

    $("#secondPage #con").slimScroll({
      width: '100%', //可滚动区域宽度
      height: '100%', //可滚动区域高度
      disableFadeOut: true,
    });
    $("#secondPage #con").css("padding", 0)

    myFullpage.setAllowScrolling();

    $("#firstPage").css({
      backgroundImage: "url(./image/picture-search.jpg)",
      backgroundSize: "cover"
    });
    let $nav = $(".nav");
    $nav.find("a.start").click(() => {
      myFullpage.moveTo(1)
    });
    $nav.find("a.home").click(() => {
      myFullpage.moveTo(2, 0)
    });
    $nav.find("a.order").click(() => {
      myFullpage.moveTo(3, 0)
    });
  </script>
  <script src="./js/home.js"></script>
  <script src="./js/order.js"></script>
</body>

</html>